// 清除元素默认的内外边距
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  outline: none;
}

html {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'YouYuan';
  background-color: black;
  margin: 0;
  padding: 0;
}

// 让所有斜体不倾斜
em,i {
  font-style: normal;
}

// 去掉列表前面的小点
li {
  list-style: none;
}

// 图片没有边框 去掉图片dice的空白缝隙
img {
  border: 0; //ie6
  vertical-align: middle;
}

// button 按钮变小手
buttom {
  cursor: pointer
}

// 取消a标签连接下划线
a {
  color: #343440;
  text-decoration: none;
}

a:hover {
  color:#343440;
}

//浮动
.float-r {
  float: right;
}

//浮动
.float-l {
  float: left;
}

// 字体加粗
.font-bold {
  font-weight: bold;
}

//文章一行显示，多余省略号显示
.title-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 方块背景颜色
.bg-color-black {
  background-color: rgba(19, 25, 47, 0.6);
}

// 常用颜色
.colorBlack {
  color: black !important;
}

.colorGrass {
  color: #33cea0 !important;
  &:hover {
    color: lightsalmon !important;
  }    
}

.colorRed {
  color: red !important;
  &:hover {
    color: lightsalmon !important;
  }    
}

.colorYellow {
  color: yellow !important;
  &:hover {
    color: lightsalmon !important;
  }    
}

.colorLightBlue {
  color: turquoise !important;
  &:hover {
    color: lightsalmon !important;
  }    
}

.colorPink {
  color: pink !important;
  &:hover {
    color: lightsalmon !important;
  }    
}

.colorText {
  color: white !important;
  // &:hover {
  //   color: lightsalmon !important;
  // }    
}

.colorBlue {
  color: blue !important;
  &:hover {
    color: lightsalmon !important;
  }    
}

.colorTomato {
  color: tomato !important;
  &:hover {
    color: lightsalmon !important;
  }    
}

.colorDeepskyblue {
  color: deepskyblue !important;
  &:hover {
    color: lightsalmon !important;
  }  
}

.colorDarkturquoise {
  color: darkturquoise !important;
  &:hover {
    color: lightsalmon !important;
  } 
}

.colorLightsalmon {
  color: lightsalmon !important;
  &:hover {
    color: deepskyblue !important;
  } 
}

.colorGold {
  color: gold !important;
  &:hover {
    color: lightsalmon !important;
  } 
}

.colorLightsteelblue {
  color: lightsteelblue !important;
  &:hover {
    color: lightsalmon !important;
  } 
}

.colorSienna {
  color: sienna !important;
  &:hover {
    color: lightsalmon !important;
  }  
}

.colorDarkorchid{
  color: darkorchid !important;
  &:hover {
    color: lightsalmon !important;
  }  
}

.colorLightpink {
  color: lightpink !important;
  &:hover {
    color: lightsalmon !important;
  }  
}

.colorHotpink {
  color: hotpink !important;
  &:hover {
    color: lightsalmon !important;
  }  
}
// 模板样式结束

// 设置默认背景图片
#index {
  color: darkturquoise;
  width: 100%;
  height: 100%;
  // 图片缩放自适应
  background: url("../images/bg.png") center center no-repeat;
  //background: url("../bgPage.jpg") center center no-repeat;
  background-size: 100% 100%;
  position: fixed;
  overflow: hidden;
}

// 最小只支持1000px * 600px，太小了margin-bottom和padding-bottom属性比例不够协调。

.koi-body-png {
  // 头部布局
  .header {    
      position       : relative;
      top            : 0.5vw;
      width          : 100%;
      background     : url("@/assets/images/title.png") no-repeat;
      background-size: 100%;
      text-align     : center;
      margin         : 0;
  }

  // 标题自定义修改
  .title {
    position: absolute;
    left: 46%;
    margin-top: 0.4%;
  }

  // 当前时间css
  .localTime {
    position: absolute;
    right: 1%;
    top: 35%;
  }

  // 子节点首页字体css
  .koiPage {
    position: absolute;
    left: 1%;
    top: 35%;
  }

  // 跳转大屏页面选择框
  .selectPage {
    position: absolute;
    left: 0.4%;
    top: 35%;
  }    

  // 轮播图标
  .skipPage {
    position: absolute;
    right: 17%;
    top: 2.2%;   
  }

   /* 本项目采用ElementPlus - Layout布局 */
  .layoutHome {
    position: absolute;
    min-width: 1000px;
    min-height: 600px;
    top: 8%;
    width: 100%;
    height: 100%;
  }
 }

// 总体布局
.koi-body {
  // 头部布局
  .header {    
    // DataV边框10宽度左侧和高度设置
    .dv-dec-10-left {
      width: 25%;
      margin-top: 0.5%;
      margin-left: 0.2%;
      height: 8px;
      float: left;
    }

    // DataV边框10宽度右侧和高度设置
    .dv-dec-10-right {
      width: 25%;
      margin-top: 0.5%;
      margin-left: 0.2%;
      height: 8px;
      float: right;
      // 边框翻转
      transform: rotateY(180deg);
    }

    // DataV边框8左侧宽度和高度设置
    .dv-dec-8-left {
      width: 18%;
      height: 6%;
      margin-top: 0.7%;
      position: absolute;
      left: 25%;
    }

    // DataV边框8宽度右侧和高度设置
    .dv-dec-8-right {
      width: 18%;
      height: 6%;
      margin-top: 0.7%;
      position: absolute;
      right: 25%;
    }
    
    // 标题自定义修改
    .title {
      position: absolute;
      left: 46%;
      margin-top: 0.8%;
    }

    // 当前时间css
    .localTime {
      position: absolute;
      right: 1%;
      top: 2%;
    }

    // 首页Gitee字体css
    .homePage {
      position: absolute;
      left: 18%;
      top: 2.4%;
    }

    // 子节点首页字体css
    .koiPage {
      position: absolute;
      left: 1%;
      top: 2.2%;
    }

    // 跳转大屏页面选择框
    .selectPage {
      position: absolute;
      left: 0.4%;
      top: 2.2%;
    }    

    // 轮播图标
    .skipPage {
      position: absolute;
      right: 17%;
      top: 2.2%;   
    }
    
  }

  /* 本项目采用ElementPlus - Layout布局 */
  .layoutHome {
    position: absolute;
    min-width: 1000px;
    min-height: 600px;
    top: 5.5%;
    width: 100%;
    height: 100%;
  }

}
